<template>
    <div class="edu-page-warp">
      <ConditionCard
          shadow="never"
          body-style="padding: 24px 24px 6px 24px;"
          @search="onSubmit"
          @reset="reset('queryForm')"
      >
          <el-form ref="queryForm" :model="queryForm" label-position="right" label-width="90px">
              <el-row :gutter="24" style="height: 50px;">
                  <el-col :span="8">
                      <el-form-item label="辅修年级:" prop="minorGrade">
                          <el-date-picker
                              v-model="queryForm.minorGrade"
                              value-format="yyyy"
                              type="year"
                              placeholder="请选择"
                              style="width: 100%"
                          />
                      </el-form-item>
                  </el-col>
              </el-row>
          </el-form>
      </ConditionCard>
      <el-card shadow="never" body-style="padding: 24px;">
        <div class="edu-page-title" style="margin-bottom: 20px;">课程分类管理</div>
        <div class="clearfix" style="margin-bottom: 16px;">
          <div class="float-left">
              <el-input style="width: 240px;"   v-model="queryForm.classifyName" placeholder="请输入分类名称搜索" suffix-icon="el-icon-search" @change="search" />
          </div>
          <div class="float-right">
            <el-button type="danger" @click="deleteBatch">{{ $t('common.btn.delete') }}</el-button>
            <el-button type="primary" @click="addCourseCategory()">{{ $t('common.btn.add') }}</el-button>
          </div>
        </div>
        <edu-table :data="courses" :pageNum="queryForm.pageNum_" @selection-change="checkBoxChange"
          :pageSize="queryForm.pageSize_" :total="queryForm.total" @page-change="handleCurrentChange" :pageSizes="[20, 40, 80, 100]" ref="principalTable" tooltip-effect="light">
          <edu-table-column label="名称" show-overflow-tooltip align='center'>
            <template slot-scope="props">{{ props.row.classifyName}}</template>
          </edu-table-column>
          <edu-table-column label="辅修年级" align='center'>
            <template slot-scope="props">
              <span v-if="props.row.minorGradeDest">
                {{ props.row.minorGradeOri+'-'+props.row.minorGradeDest }}
              </span>
              <span v-else>
                {{ props.row.minorGradeOri+'-'+'永久' }}
              </span>
            </template>
          </edu-table-column>
          <edu-table-column :label="$t('common.text.operation')" width="250px">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="editCourseCategory(scope.row)">课程分类设置</el-button>
              <el-button type="text" size="mini" @click="editCourse(scope.row)">{{ $t('common.btn.edit') }}</el-button>
              <el-button type="text" size="mini" @click="showDeleteCourseCategory(scope.row)">
                {{ $t('common.btn.delete') }}</el-button>
            </template>
          </edu-table-column>
          </edu-table>
      </el-card>
      <!-- 添加课程 -->
      <el-dialog :title="dialogTitle" :visible.sync="showCourseDialog" v-if="showCourseDialog" width="40%" @close="resetFormValidate()"
        :close-on-click-modal="false" :close-on-press-escape="false">
        <el-form ref="courseForm" :model="courseForm" :rules="courseRules" label-width="125px" label-position="right"
          size="mini" class="bg-white">
          <el-row>
            <el-col :span="20" :offset='2'>
              <el-form-item label="类别名称(中文)：" prop="classifyName">
                <el-input v-model="courseForm.classifyName" type="text" placeholder='请输入名称' style="width:91%" maxlength="32" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20" :offset='2'>
              <el-form-item label="辅修年级：" prop="minorGradeOri">
                <el-date-picker v-model="courseForm.minorGradeOri" value-format="yyyy" type="year" placeholder="请选择" style="width: 44%;">
                </el-date-picker>
                <span>~</span>
                <el-date-picker v-model="courseForm.minorGradeDest" value-format="yyyy" type="year" placeholder="请选择" style="width: 44%;">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row>
          <el-col :span="24">
            <div class="float-right">
              <el-button @click="cancelDialog">{{ $t('common.btn.cancel') }}</el-button>
              <el-button type="primary" @click="confirmDialog">{{ $t('common.btn.confirm') }}</el-button>
            </div>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
  </template>
  <script>
    import {getClassifyList, addClassify, editClassify, deleteClassify} from "common/src/api/minor/minorCourseManager"
    export default {
      name: "minor-course-category-manage",
      data() {
        return {
          showCourseDialog: false,
          dialogTitle: "",
          isEdit: false,
          queryForm: {
            classifyName: "",
            minorGrade: '',
            pageNum_: 1,
            pageSize_: 20,
            total: 0
          },
          courseForm: {
            id: "",
            classifyName: "",
            minorGradeOri: '',
            minorGradeDest: ''
          },
          dialogOptions: {},
          courses: [],
          deleteType: "", // 删除类型：单个删除或批量删除
          deleteId: "", // 单个删除项Id
          courseRules: {
            classifyName: [{
                required: true,
                message: "请输入课程名称(中文)",
                trigger: "change"
              },
              {
                min: 2,
                max: 32,
                message: "长度在 2 到 32 个字符",
                trigger: "change"
              }
            ],
            minorGradeOri: [{
              required: true,
              message: "请选择辅修年级",
              trigger: "change"
            }]
          }
        };
      },
      created() {
          this.init();
      },
      methods: {
        init() {
          this.getCourseList();
        },
        reset(ref) {
          this.queryForm.minorGrade = "";
          this.getCourseList();
        },
        onSubmit() {
          this.getCourseList();
        },
        search() {
            this.queryForm.pageNum_ = 1;
            this.getCourseList();
        },
        getCourseList({
          pageSize,
          pageNum
        } = {}) {
          let parms = {
            pageNum_: pageNum || this.queryForm.pageNum_,
            pageSize_: pageSize || this.queryForm.pageSize_,
            minorGrade: this.queryForm.minorGrade,
            classifyName: this.queryForm.classifyName
          };
          this.checkList = null;
          getClassifyList(parms).then(response => {
            if (response.code === 200) {
              this.queryForm.total = response.data.total_;
              this.queryForm.pageNum_ = parms.pageNum_;
              this.queryForm.pageSize_ = parms.pageSize_;
              this.courses = response.data.list || [];
            }
          }).catch(() =>{
            this.courses = [];
            this.queryForm.total = 0;
            this.queryForm.pageNum_ = 1;
            this.queryForm.pageSize_ = parms.pageSize_;
          });
        },
        handleCurrentChange(pageOption) {
          this.getCourseList(pageOption);
        },
        // 重置课程对话框
        resetCourseDialog() {
          this.courseForm.id = "";
          this.courseForm.classifyName = "";
          this.courseForm.minorGradeOri = "";
          this.courseForm.minorGradeDest = "";
        },
        // 创建课程类别
        addCourseCategory() {
          this.resetCourseDialog();
          this.dialogTitle = '新增课程分类';
          this.isEdit = false;
          this.showCourseDialog = true;
        },
        // 课程分类设置
        editCourseCategory(row) {
          let bclOptionalCourse = {
            id: row.id,
            classifyName: row.classifyName,
            minorGradeOri: row.minorGradeOri,
            minorGradeDest: row.minorGradeDest
          }
          sessionStorage.setItem("minorOptionalCourse", JSON.stringify(bclOptionalCourse));
          this.$router.push({ //核心语句
            path: '/minorCourseManageDetail', //跳转的路径
            query: { 
              id: row.id,
              minorGradeOri: row.minorGradeOri,
              minorGradeDest: row.minorGradeDest
            }
          })
        },
        // 编辑课程分类
        editCourse(row) {
          this.dialogTitle = '编辑课程分类';
          this.isEdit = true;
          this.courseForm.id = row.id;
          this.courseForm.classifyName = row.classifyName;
          this.courseForm.minorGradeOri = row.minorGradeOri ? row.minorGradeOri + "" : "";
          this.courseForm.minorGradeDest = row.minorGradeDest ? row.minorGradeDest + "" : "";
          this.showCourseDialog = true;
        },
        // 删除对话框
        showDeleteCourseCategory(row) {
          this.$confirm(
              "您确定要删除吗？",
              "提示", {
                confirmButtonText: this.$t("common.btn.confirm"),
                cancelButtonText: this.$t("common.btn.cancel"),
                type: "warning"
              }
            )
            .then(() => {
              if (!(row.isLeafNode && row.isLeafNode * 1)) {
                this.confirmDelete([row.id]);
              } else {
                this.$confirm(
                    "确认删除此课程下绑定的子课程吗？",
                    "提示", {
                      confirmButtonText: "确定",
                      cancelButtonText: "取消",
                      type: "warning"
                    }
                  )
                  .then(() => {
                    this.confirmDelete([row.id]);
                  })
              }
            })
        },
        // 取消对话框课程分类
        cancelDialog() {
          this.showCourseDialog = false;
        },
        resetFormValidate() {
          // 清除表单校验
          this.$refs.courseForm.resetFields();
          this.resetCourseDialog();
        },
        // 保存对话框课程分类
        confirmDialog() {
          this.$refs.courseForm.validate(valid => {
              if (!valid) {
                return;
              }
              let data = {
                  classifyName: this.courseForm.classifyName,
                  minorGradeOri: this.courseForm.minorGradeOri,
              };
              if (this.courseForm.minorGradeOri && this.courseForm.minorGradeDest) {
                  if (this.courseForm.minorGradeOri > this.courseForm.minorGradeDest) {
                      this.$message({
                      type: "warning",
                      message: "开始时间不能大于结束时间"
                      });
                      return;
                  } else {
                      data.minorGradeDest = this.courseForm.minorGradeDest;
                  }
              }
              if (!this.isEdit) {
                addClassify(data).then(response => {
                  if (response.code === 200) {
                    this.$message({
                      type: "success",
                      message: "创建成功"
                    });
                    this.showCourseDialog = false;
                    this.getCourseList();
                  }
                });
              }else {
                data.id = this.courseForm.id;
                editClassify(data).then(response => {
                  if (response.code === 200) {
                    this.$message({
                      type: "success",
                      message: "修改成功"
                    });
                    this.showCourseDialog = false;
                    this.getCourseList();
                  }
                });
              }
            }
          );
        },
        confirmDelete(ids) {
          if (ids && ids.length) {
            deleteClassify({ids}).then(response => {
              if (response.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功"
                });
                this.getCourseList();
              }
            });
          }
        },
        checkBoxChange(checkArr) {
          let ids = [];
          checkArr.forEach(item => {
            ids.push(item.id);
          });
          this.checkList = ids;
        },
        deleteBatch() {
          if (!this.checkList || !this.checkList.length) {
            this.$message({
              message: '请选择需要删除的数据',
              type: 'warning'
            });
            return;
          }
          this.$delConfirm().then(() => {
              this.confirmDelete(this.checkList);
          });
        }
      }
    };
  
  </script>
  <style lang="sass" scoped>
  
  </style>
  